<template>
    <view>
        <view v-if="!isLoad" class="margin-top load loading text-l text-grey"></view>
        <view class="main-admin" v-if="isAdmin && isLoad">
            <!-- parse <template is="newsForm" 
 :data="contentDesc,cateIdOptions,imgMax,imgList,isPicCheck,formDesc,formUrl,formUrlFocus,formOrder,formOrderFocus,formType,formCateId,formCateIdFocus,formTitle,formTitleFocus,formContent,formContentFocus"/> -->
            <block name="newsForm" v-if="false">
                <view class="form-box shadow">
                    <view class="form-group">
                        <view class="title must">标题</view>
                    </view>

                    <view class="form-group">
                        <input placeholder="简短的标题" placeholder-class="phc" v-model="formTitle" :focus="formTitleFocus" maxlength="50" />
                    </view>
                    <view v-if="formTitleFocus" class="hint-desc error">{{ formTitleFocus }}</view>

                    <view class="form-group arrow">
                        <view class="title must">分类</view>
                        <cmpt-picker
                            id="cate-picker"
                            :sourceData="cateIdOptions"
                            @select="url($event, { type: 'picker', item: 'formCateId', tagId: 'cate-picker' })"
                            data-type="picker"
                            data-item="formCateId"
                            :item="formCateId"
                        ></cmpt-picker>
                    </view>
                    <view v-if="formCateIdFocus" class="hint-desc error">{{ formCateIdFocus }}</view>

                    <view class="form-group">
                        <view class="title must">
                            排序号
                            <text class="text-grey text-normal margin-left-xs">(小的先显示)</text>
                        </view>
                        <input placeholder="排序号，小的先显示" type="digit" placeholder-class="phc" v-model="formOrder" :focus="formOrderFocus" maxlength="4" />
                    </view>
                    <view v-if="formOrderFocus" class="hint-desc error">{{ formOrderFocus }}</view>

                    <view class="form-group">
                        <view class="action text-bold text-l">简介</view>
                        <view class="action">{{ formDesc.length }}/100</view>
                    </view>

                    <view class="form-group align-start">
                        <textarea
                            name="content"
                            placeholder-class="phc"
                            placeholder="请输入本文简介，若不填写则直接取内容前100个字作为简介"
                            style="min-height: 150rpx"
                            v-model="formDesc"
                            maxlength="100"
                            :focus="formDescFocus"
                            :auto-height="true"
                        ></textarea>
                    </view>
                    <view v-if="formDescFocus" class="hint-desc error">{{ formDescFocus }}</view>

                    <view class="form-group">
                        <view class="title must">是否外部文章</view>
                        <switch v-if="formType == 1" @change="switchModel" data-item="formType" class="blue sm" :checked="true"></switch>
                        <switch v-if="formType != 1" @change="switchModel" data-item="formType" class="blue sm"></switch>
                    </view>

                    <block v-if="formType == 1">
                        <view class="form-group">
                            <view class="title">*外部文章链接</view>
                        </view>

                        <view class="form-group">
                            <input placeholder="请填写或者粘贴外部文章链接地址" placeholder-class="phc" v-model="formUrl" :focus="formUrlFocus" maxlength="300" />
                        </view>
                        <view v-if="formUrlFocus" class="hint-desc error">{{ formUrlFocus }}</view>

                        <view class="title-desc text-orange">
                            <text class="icon-info margin-right-xs"></text>
                            必须是您关联的公众号或者业务域名下的文章
                        </view>
                    </block>
                    <block v-else>
                        <view class="form-group arrow" @tap="url" data-url="../../content/admin_content">
                            <view class="title must">
                                详细内容
                                <text class="text-grey text-normal margin-left-xs">(必填)</text>
                            </view>
                            <view :class="'form-text ' + (contentDesc == '未填写' ? 'text-orange' : '')">{{ contentDesc }}</view>
                        </view>
                        <view v-if="formContentFocus" class="hint-desc error">{{ formContentFocus }}</view>
                    </block>
                </view>

                <view class="form-box shadow">
                    <!-- img upload begin -->
                    <cmpt-img-upload :imgMax="1" title="*封面图上传 (必填)" :isCheck="false" :imgUploadSize="10" :imgList="imgList" @upload="bindImgUploadCmpt" />
                    <!-- img upload end -->
                </view>

                <button @tap="bindFormSubmit" class="btn-admin margin-top-xs">提交</button>
            </block>
        </view>
    </view>
</template>

<script>
import cmptImgUpload from '../../../../cmpts/public/img/img_upload_cmpt';
const AdminBiz = require('../../../../biz/admin_biz.js');
const pageHelper = require('../../../../helper/page_helper.js');
const bizHelper = require('../../../../biz/biz_helper.js');
const cloudHelper = require('../../../../helper/cloud_helper.js');
const validate = require('../../../../helper/validate.js');
const AdminNewsBiz = require('../../../../biz/admin_news_biz.js');
export default {
    components: {
        cmptImgUpload
    },
    data() {
        return {
            isLoad: false,
            imgList: '',
            isAdmin: '',
            formTitle: '',
            formTitleFocus: [],
            cateIdOptions: [],
            formCateId: '',
            formCateIdFocus: [],
            formOrder: '',
            formOrderFocus: [],
            formDesc: [],
            formDescFocus: [],
            formType: 0,
            formUrl: '',
            formUrlFocus: [],
            contentDesc: '',
            formContentFocus: []
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        this.setData(await AdminNewsBiz.initFormData()); // 初始化表单数据
        this.setData({
            isLoad: true
        });
        this.setContentDescFun();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    methods: {
        setContentDescFun: function () {
            AdminBiz.setContentDesc(this);
        },

        model: function (e) {
            pageHelper.model(this, e);
        },

        /**
         * 数据提交
         */
        bindFormSubmit: async function () {
            if (!AdminBiz.isAdmin(this)) {
                return;
            }
            let data = this;
            // 数据校验  by 类型
            if (data.formType == 0) {
                // 内部
                if (this.formContent.length == 0) {
                    return pageHelper.showModal('详细内容不能为空');
                }
                data = validate.check(data, AdminNewsBiz.CHECK_FORM, this);
            } else {
                // 外部
                data = validate.check(data, AdminNewsBiz.CHECK_FORM_OUT, this);
            }
            if (!data) {
                return;
            }
            data.cateName = AdminNewsBiz.getCateName(data.cateId);
            try {
                if (this.imgList.length == 0) {
                    return pageHelper.showModal('请上传封面图');
                }

                // 提取简介
                data.desc = AdminNewsBiz.getDesc(data.desc, this.formContent);

                // 先创建，再上传
                let result = await cloudHelper.callCloudSumbit('admin/news_insert', data);
                let newsId = result.data.id;

                // 图片 提交处理
                uni.showLoading({
                    title: '提交中...',
                    mask: true
                });
                let imgList = this.imgList;
                await AdminNewsBiz.updateNewsPic(newsId, imgList);
                let formContent = this.formContent;
                if (formContent && formContent.length > 0) {
                    uni.showLoading({
                        title: '提交中...',
                        mask: true
                    });
                    await AdminNewsBiz.updateNewsCotnentPic(newsId, formContent, this);
                }
                let callback = async function () {
                    bizHelper.removeCacheList('admin-news');
                    bizHelper.removeCacheList('news-list');
                    uni.navigateBack();
                };
                pageHelper.showSuccToast('添加成功', 2000, callback);
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.log(err);
            }
        },

        bindImgUploadCmpt: function (e) {
            this.setData({
                imgList: e.detail
            });
        },

        switchModel: function (e) {
            pageHelper.switchModel(this, e);
        },

        url: function (e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            pageHelper.url(e, this);
        }
    }
};
</script>
<style>
@import './admin_news_add.css';
@import 'undefined';
</style>
